{% extends 'yasn/base.html' %}

{% block content %}
    <div id="story">
        <br class="clear" />
        <div class="title">
            <h1>{{ story.title }}</h1>
        </div>      
        <div class="author">
            by {{ story.author.user.username }}
        </div>
        <div class="clear"></div>
        <div class="body">
        {{ story.body }}
        </div>
    </div>  
    
    <br />
    <div class="right">
        <a href="{% url view_stories %}" >Back to all stories</a>
    </div>
    
    <h2>Comments:</h2>
        <div id="comments">
            {% for comment in comments %}
                <div class="comment">
                    <div class="header">#{{ forloop.counter }} written by <a href="{% url profile_view comment.author.id %}">{{ comment.author }}</a> on {{ comment.date|date:"M dS, Y \a\t f a" }}</div>
                    <div class="body">{{ comment.body }}</div>
                </div>      
            {% empty %}
                <div class="comment">No comments for this story.</div>
            {% endfor %}
        </div>      

    
    <h2>Leave a comment:</h2>
    
    <form action="" method="post" id="comment-form">
        <div class="line" style="margin-bottom: 5px;">      
            <div class="field">{{ comment_form.body }}</div>
            {% if comment_form.body.errors %}<div class="field error">{{ comment_form.body.errors }}</div>{% endif %}
        </div>
        <div class="line" style="margin-bottom: 15px;">     
            <input type="submit" value="Add"/> 
        </div>
        <div class="line">
            {% if platforms %}
                <h3>Notify this comment on:</h3> 
                <ul class="platform-list" style="padding-left: 0px;">
                {% for platform in platforms %}                 
                    <li>
                        <input type="radio" name="notify" value="{{ platform.id }}" id="radio_{{ platform.id }}"/>
                        <label for="radio_{{ platform.id }}"><img src="{{ MEDIA_URL }}{{ platform.logo }}" alt="{{ platform.name }}" style="padding-right: 5px;"/></label>
                    </li>
                {% endfor %}
                </ul>   
            {% endif %}         
        </div>
    </form>
{% endblock %}